<template>
  <!-- 首页 -->
  <div class="dashboard">
    <a-skeleton :loading="loading" active>
      <top-bar />
    </a-skeleton>

  <div class="navbar">
      <div
              v-for="(item, index) in items" 
              :key="index" 
              class="navbar-item" 
              :class="{ selected: selectedItem === index }"
              @click.prevent="selectItem(index,item.link)"
          >
              {{ item.name }}
      </div>
  </div>
  <!-- 下面的 -->
  

  <div class="centerof">
      <div class="box1">
        <!-- 学生头像 -->
         <div class="imgavatar">
          <div class="img">
            <img src="https://img.js.design/assets/img/622f097527d2c8219cd7f4ff.png" alt="">
          </div>
          <!-- 名字 -->
          <div class="img-zi" v-for="(item, index) in theselectname" @click="tapup(item)" >
            {{ item.stu_name }}  ---{{ item.stu_no }}
          </div>
         </div>
         <!-- 按钮 -->
         <div class="btnboxcan">
          <!-- <div class="btnbox" v-for="(box, index) in boxs" :key="index" @click="tap(index)">
               {{ box.name }}
           </div> -->
           <a-button class="btnbox" @click="tap(0)" ref="ref1">开始点名</a-button>
           <a-button class="btnbox" ref="ref2" @click="tap(1)">停止点名</a-button>
           <a-button class="btnbox" ref="ref3"  @click="tap(2)">重置点名</a-button>
           <a-button class="btnbox" ref="ref4"  @click="tap(3)">自定义人数</a-button>
           <a-button class="btnbox" ref="ref5"  @click="tap(4)">积分奖励</a-button>
           <a-button class="btnbox" ref="ref6"  @click="tap(5)">新手导航</a-button>

           <a-tour :open="opends" :steps="steps" @close="handleOpen(false)">
              <template #indicatorsRender="{ current, total }">
                  <span>{{ current + 1 }} / {{ total }}</span>
              </template>
           </a-tour>





         </div>
         <div v-if="needshow">
            <Firework />
          </div>
         <div class="redorplus" v-if="por">
          <button @click="decreaseDisplayCount">减少</button>
            <span>{{ displayCount }}</span>
          <button @click="increaseDisplayCount">增加</button>
          </div>
      </div>
      <a-modal v-model:open="open" title="点击一下，选择你的奖励的积分（点击名字增加分数）" @ok="handleOk" centered>
      <p style="font-size: 25px;" @click="addthat(1)">积分奖励+1</p>
      <p style="font-size: 25px;" @click="addthat(2)">积分奖励+2</p>
      <p style="font-size: 25px;" @click="addthat(3)">积分奖励+3</p>
    </a-modal>
      <!-- 右边的盒子 -->
      <div class="box2">
        <Leaderboard  :class_id="class_id"/>
      </div>
  </div>
</div>
</template>

<script  setup>
import Firework from '@/components/Firework.vue';
import TopBar from './components/TopBar'
import { ref,onBeforeUnmount, onMounted } from 'vue';
import { message } from 'ant-design-vue'
import Leaderboard from '@/components/Leaderboard';
// 路由器
import { useRouter } from 'vue-router';
const router = useRouter();
// 路由
import { useRoute } from 'vue-router';
import axios from 'axios';
const selected = ref(0)
const route = useRoute();
const selectedIndex = ref(null);
const needshow = ref(false)
const class_id = ref(1)
const addcount = ref(0)
// 模态框
const open = ref(false);


// 按钮导航栏
const opends = ref(false);
const ref1 = ref(null);
const ref2 = ref(null);
const ref3 = ref(null);
const ref4 = ref(null)
const ref5 = ref(null)
// const ref6 = ref(null)

const steps = [
  {
    title: '开始点名',
    description: '点击这里开始点名',
    target: () => ref1.value && ref1.value.$el,
  },
  {
    title: '点击后停止',
    description: '点击停止点名',
    target: () => ref2.value && ref2.value.$el,
  },
  {
    title: '回到初始状态',
    description: '点击回转',
    target: () => ref3.value && ref3.value.$el,
  },
  {
    title: '自定人数',
    description: '点击后出现选择人数按钮最少为1最多3',
    target: () => ref4.value && ref4.value.$el,
  },
  {
    title: '积分奖励',
    description: '点击后选择奖励多少积分，关闭弹窗后，点击人名可以增加积分',
    target: () => ref5.value && ref5.value.$el,
  }
];
const handleOpen = val => {
  opends.value = val;
};















// ---------------------------------------------------------------

  const items = [
       { name: '课堂点名', link: '/thestart' },
       { name: '学生名单', link: '/classlist' },
       { name: '首页', link: '/' }
   ];
   const selectedItem = ref(0);
   const selectItem = (index,link) => {
       selectedItem.value = index;
       router.push({ path: link, query: { selectedIndex: index } });
   };

onMounted(()=>{
  selectedItem.value = route.query.selectedIndex
  console.log("获得",selectedItem.value)
  selected.value = selectedItem.value
  apiclasslist()
})
const loading = ref(true)

// const boxs = ref([
//   {name:'开始点名'},
//   {name:'停止点名'},
//   {name:'重置点名'},
//   {name:'自定人数'},
//   {name:'积分奖励'}
// ])
let isRolling = false;
const activeIndex = ref(0);
const timer = ref(null);
const rollNameList = ref(['项1', '项2', '项3','项4','项5','6项']);
const theselectname = ref('')
const displayCount = ref(1);
const maxDisplayCount = 3;
const minDisplayCount = 1; 
const originalIndices = ref([]); 
const por = ref(false)
const toggleRoll = () => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null; // 清空定时器
    isRolling = false; // 重置状态，允许再次启动
  }
};

function toggleRollst(){
  if (isRolling) return; // 如果已经在滚动，直接返回
  isRolling = true; // 设置为正在滚动
  timer.value = setInterval(() => {
    const selectedNames = [];
    while (selectedNames.length < displayCount.value) {
      activeIndex.value = Math.floor(Math.random() * rollNameList.value.length);
      const name = rollNameList.value[activeIndex.value];
      if (!selectedNames.includes(name)) {
        selectedNames.push(name);
      }
     }
     theselectname.value = selectedNames;
     originalIndices.value = selectedNames.map(name => rollNameList.value.indexOf(name));
    //  console.log("原始索引:", originalIndices.value);
    }, 100);
}
function tapup(item){
  // const originalIndex = originalIndices.value[index];
  // console.log("点击加分",originalIndex,"名字",item)
  console.log("地道道",item)
  apipluscoin(item.class_id,item.stu_no)
}
function resetRollst() {
  toggleRoll(); 
  activeIndex.value = '学号';
  theselectname.value = '名字'
  console.log("请点击开始"); 
}
function increaseDisplayCount() {
  if (displayCount.value < maxDisplayCount) {
    displayCount.value++;
  }
}

function decreaseDisplayCount() {
  if (displayCount.value > minDisplayCount) {
    displayCount.value--;
  }
}

// 清
onBeforeUnmount(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});

setTimeout(() => {
  loading.value = false
}, 1000)
// 点击
function tap(index){
    if(index==0){
      console.log("开始")
      toggleRollst();
      por.value = false
      addcount.value=0
    }
    if(index==1){
      console.log("点击结束")
      toggleRoll()
    }
    if(index==2){
      resetRollst()
    }
    if(index==3){
      por.value = !por.value
    }
    if(index==4){
      open.value = true;
      // apipluscoin()
    }
    if(index==5){
      opends.value = true;
    }
}

// 模态框方法
const handleOk = e => {
  console.log(e);
  open.value = false;
};
function addthat(e){
  addcount.value = e
  console.log("增加",addcount.value)
}
// api
// 学生名单
function apiclasslist(){
  axios.get('/api/stus').then((respose)=>{
    console.log("得到",respose)
    rollNameList.value = respose.data.data
  })
}

// 积分
function apipluscoin(cid,cno){
  axios.post('/api/stus/increment',{
    class_id:cid,
    points:addcount.value,
    stu_no:cno

  }).then((respose)=>{
    console.log("结果",respose.data)
    if(respose.data.code==200){
      message.success(respose.data.data, 3);
      needshow.value = true
  setTimeout(()=>{
    needshow.value = false
  },6000)
    }else{
      message.error(respose.data.data, 3);
    }
  })
  needshow.value = true
  setTimeout(()=>{
    needshow.value = false
  },6000)
}


</script>
<style scoped lang="less">
@import './index.less';
</style>
